<template>
    <!-- 设置通知消息 -->
    <el-dialog title="设置通知消息" v-model="dialogVisible" width="800px" append-to-body>
        <el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
            <el-radio-button value="defaultNotice">默认通知设置</el-radio-button>
            <el-radio-button value="seniorNotice">高级通知设置</el-radio-button>
        </el-radio-group>
        <div v-if="tabPosition === 'defaultNotice'">
            <el-form ref="templateRef" label-width="130px" label-position="top" style="margin: 0 20px;">
                <el-form-item label="默认通知" prop="checkedMsgSendTypeList">
                    <template #label>
                        <span>
                            默认通知
                            <el-tooltip :content="tooltipContent" placement="top">
                                <el-icon><question-filled /></el-icon>
                            </el-tooltip>
                        </span>
                    </template>
                    <el-checkbox-group v-model="checkedMsgSendTypeList">
                        <el-checkbox style="margin: 5px;" v-for="(item, index) in messageSendTypeList" :value="item.id"
                            :key="item.id" border>
                            {{ item.name }}
                            <msgIcon :iconValue="item.id" viewValue="primary" />
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
        </div>
        <div v-if="tabPosition === 'seniorNotice'">
            <el-row class="mb8">
                <el-col>
                    <el-button type="primary" plain icon="CirclePlus" @click="openSeniorSet">新增</el-button>
                </el-col>
            </el-row>
            <el-row class="mb8">
                <el-col>
                    <el-table :data="msgTableData" style="width: 100%;height: 40vh;">
                        <el-table-column prop="messageSendTypeList" label="通知类型">
                            <template #default="item">
                                <span v-for="(rowItem, index) in item.row.messageSendTypeList" :key="index">
                                    <msgIcon :iconValue="rowItem.id" viewValue="primary" />
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="event" label="事件类型">
                            <template #default="item">
                                {{ getEventType(item.row.event) }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="templateName" label="消息模板名称" />
                        <el-table-column prop="informIdList" label="通知人">
                            <template #default="item">
                                {{ getNoticeUserType(item.row.informIdList) }}
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" fixed="right" width="150" align="center"
                            class-name="small-padding fixed-width">
                            <template #default="scope">
                                <el-button link type="success" @click="handleDelete(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </div>

        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="submitDialog">确认</el-button>
                <el-button @click="closeDialog">关闭</el-button>
            </div>
        </template>
    </el-dialog>
    <set-senior-msg v-if="noticeSeniorSetShow" :visible="noticeSeniorSetShow"
        @changeSet="handleFlowMsgSet"></set-senior-msg>
</template>
<script>
import msgIcon from '@/components/workflowNew/components/msgIcon.vue';
import { saveTaskMgmt } from "@/api/workflowNew/flowMsgApi";
import SetSeniorMsg from './setSeniorMsg.vue';
import { noticeUserList, messageSendTypeList, eventTypeList } from '@/utils/antflow/const';
export default {
  components: {
    SetMsgDrawer,
    ViewFormDrawer
  },
   props: {
    visible: {
        type: Boolean,
        default: false,
    },
    formMsgData: {
        type: Object,
        default: () => { },
    }
  },
  data () {
    return {
       checkedMsgSendTypeList:[],
        noticeSeniorSetShow:false,
        tabPosition:'defaultNotice',
        msgTableData:[],
        tooltipContent:'注：默认通知将会采用默认消息模板，审批人为默认通知人。如果有高级设置，则以高级设置为主',

    }
  },
  computed: {
    dialogVisible: function () {
      return this.visible
    }
  },
  watch: {
    dialogVisible: {
      immediate: true,
      handler(val) {
        if (val) {
            this.checkedMsgSendTypeList = this.formMsgData.processNotices.filter(c => c.active).map(item => {
                return item.id;
            });
            this.msgTableData = this.formMsgData.templateVos || [];
        }
      }
    },
    
  },
  mounted(){
    // this.getLFPageList();
  },
  methods:{
    submitDialog() {
        let params = {
            processKey: this.formMsgData.formCode,
            notifyTypeIds: this.checkedMsgSendTypeList,
            templateVos: this.msgTableData
        }
        saveTaskMgmt(params).then(res => {
            if (res && res.code == 200) {
                this.$modal.msgSuccess("保存成功");
                this.$emit("refresh", this.formMsgData.flowType);
                this.closeDialog();
            } else {
                this.$modal.msgError("保存失败" + res.errMsg);
            }
        }).catch(err => {
            console.log(err);
        });
    },
    openSeniorSet() {
        this.noticeSeniorSetShow = true;
    },
    /**消息设置 */
    handleFlowMsgSet(data) {
        if (this.isEmpty(data)) return;

        const propsToCheck = ['messageSendTypeList', 'event', 'templateId', 'informIdList'];
        if (this.hasEmptyValue(data, propsToCheck)) {
            this.$modal.msgError("请选择完整的消息设置");
            return;
        }
        const index = this.msgTableData.findIndex(item => item.event === data.event);
        if (index !== -1) {
            // 如果找到具有相同 event 的条目，则更新该条目
            this.msgTableData[index] = { ...this.msgTableData[index], ...data };
        } else {
            // 如果没有找到，则添加新的条目
            this.msgTableData.push(data);
        }
    },
    /**消息设置 */
    handleDelete(row) {
        this.msgTableData =this.msgTableData.filter(x => x.event !== row.event)
    },

    getNoticeUserType (param) {
        if (this.isEmptyArray(param)) return '';
        let ret = noticeUserList.filter(item => {
            return param.includes(item.value);
        })?.map(item => item.label).join(', ');
        return ret;
    },

    getEventType(param) {
        if (this.isEmptyArray(param)) return '';
        return eventTypeList.filter(item => {
            return item.id == param;
        })?.map(item => item.name).join(', ');
    },
    /** 取消操作添加条件模板表单 */
    fcloseDialog() {
        this.$emit("update:visible", false);
    }

  }
}
</script>
